<template>
  <view class="page_success">
		<view class="container">
			<image class="tick" src="../../static/tick.png"></image>
		</view>
		<view class="container">
			<text class="msg">预约成功</text>
		</view>
		
		<view>
			<uni-card @click="saoma">
				<uni-row>
					<uni-col :span="3">
						<image class="scan" src="../../static/sm.png"></image>
					</uni-col>
					<uni-col style="margin-left: 10px;" :span="20">
						<text class="msg">扫码入园</text><br>
						<text class="msg_en">Scan the QR code to enter the park</text>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		
		<view class="card_msg">
			<text class="msg">预约信息</text>
		</view>
		
		<uni-card>  
		    <view class="imform_msg">  
		        <text>姓名：{{ userInfo[0].name }}</text><br/>  
		        <text>证件类型：{{ userInfo[0].type }}</text><br/>  
		        <text>证件号码：{{ userInfo[0].number }}</text><br/>  
		        <text>手机号码：{{ userInfo[0].tel }}</text><br/>  
		        <text>同行儿童数：{{ userInfo[0].children }}</text><br/>  
		        <text>同行成人：</text>  
		        <view class="companions">  
		            <view v-for="(item, index) in userInfo" :key="index">  
		                <text>{{ item.name }}</text>  
		                <!-- 判断是否为最后一个成人，如果不是，则添加“、” -->  
		                <text v-if="index < userInfo.length - 1">、</text>  
		            </view>  
		        </view>  
		    </view>  
		</uni-card>
		
		<button class="btn-apply" @click="shouye"><text class="apply-text">取消预约</text></button>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	import {
		ref
	}from'vue';
	
	
	let saoma =function(){
		// uni.navigateTo({
		// 	url: '../yuanlongp/ylp'
		// 	// url:'../yuanlongp/ylp?userData=' + encodeURIComponent(options.userData)
		// });
		   uni.navigateTo({
		     url: `/pages/yuanlongp/ylp?userData=${encodeURIComponent(JSON.stringify(userInfo))}`
		   });
	}
	let shouye=function(){
    uni.showModal({
      // content:'这是提示信息'
      content:'已经取消预约',
      showCancel:false
    })

        uni.redirectTo({
			url: '../index/index',
			});
	}

	//默认信息
	let	userInfo = reactive([{
		name : '',
		type : '',
		number : '',
		tel : '',
		children : 0
	}]);
	
	onLoad((options) => {
		if (options.userData) {
		    let userInfoData = JSON.parse(decodeURIComponent(options.userData));
			userInfo = userInfoData;
			console.log(userInfoData);
		}
	})
</script>

<style>
	.page_success{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #F3F5F9;
	}
	.apply-text{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.btn-apply{
		border: #8DCB6D solid 1px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		margin: 38px 16px;
	}
	.container{
		display: flex;
		justify-content: center; /* 水平居中 */
	}
	.imform_msg{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		
	}
	.card_msg{
		margin-left: 16px;
	}
	.scan{
		width: 32px;
		height: 32px;
		margin-top: 5px;
	}
	.tick{
		width: 53.33px;
		height: 53.33px;
		margin-top: 22px;
	}
	.msg_en{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.msg{
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 18px;
		margin-bottom: 8px;
	}
	
</style>
